<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "忘记密码验证码",
  },
}
</route>

<script lang="ts" setup>
import { ref, watch } from "vue";

const value = ref<string>("");

const errorInfo = ref("");
function handleChange(event) {
  console.log(event);
}

/* 手机号 */
const phone = ref("");  

const showKeyboard = ref<boolean>(true);

/* 获取url中的phone字段 */

 
onLoad((params) => {
   console.log('params',params);
   phone.value = params.phone
})



// 跳到设置密码页面
function goToSetPassword() {
  uni.navigateTo({
    url: "/pages/login/setPassword?phone=" + phone.value + "&smsCode=" + value.value,
  });
}

// 监听value
watch(value, (newVal) => {
  if (newVal.length !== 4) {
    return
  }
  if (newVal.length === 4 && newVal !== "1234") {
    errorInfo.value = "密码错误";
  } else {
    goToSetPassword()
    errorInfo.value = "";
  }
});
</script>

<template>
  <view style="min-height: 100vh; background-color: white">
    <div class="login_content">
      <div class="mb-36rpx forgetBox">输入验证码</div>

      <div class="mt-38rpx" style="color: #999999; font-size: 28rpx">
        已发送验证码至+86132xxxx6768
      </div>

      <!-- 密码输入框 -->
      <div class="mt-70rpx">
        <wd-password-input
          v-model="value"
          :length="4"
          :focused="showKeyboard"
          :error-info="errorInfo"
          @focus="showKeyboard = true"
        />

        <wd-number-keyboard
          v-model="value"
          v-model:visible="showKeyboard"
          :maxlength="4"
          @blur="showKeyboard = false"
        />
      </div>

      <div class="mt-106rpx" style="color: #d50159; font-size: 28rpx">
        57 秒后可重新获取
      </div>

      <div
        style="
          position: fixed;
          bottom: 92rpx;
          font-size: 28rpx;
          display: flex;
          justify-content: center;
        "
      >
        <wd-checkbox :modelValue="true" shape="square" />
        <span style="color: #999999"> 已阅读并同意</span>
        <span style="color: #ff0800">《用户协议》《隐私政策》</span>
      </div>
    </div>
  </view>
</template>

<style lang="scss" scoped>
.logo {
  margin-top: 156rpx;
  display: flex;
  justify-content: center;

  font-family: Inter, Inter;
  font-weight: 600;
  font-size: 96rpx;
  color: #000000;
  text-align: left;
  text-transform: none;
}

.login_content {
  margin-top: 100rpx;

  padding-left: 50rpx;
  padding-right: 50rpx;
}

.input_content {
  width: 650rpx;
  height: 102rpx;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  border: 2rpx solid #d9d9d9;

  display: flex;
  align-items: center;
}

.input_root {
  width: 96%;
  padding-left: 2%;
  padding-right: 2%;
}

.forgetBox {
  font-family:
    Source Han Sans CN,
    Source Han Sans CN;
  font-weight: 500;
  font-size: 40rpx;
  color: #000000;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>
